    const loadUserData = async () => {
      try {
        const response = await fetch('user_data.json');
        
        if (!response.ok) {
          throw new Error(`HTTP错误! 状态: ${response.status}`);
        }
        
        return await response.json();
      } catch (error) {
        console.error('加载用户数据失败:', error);
        showError(`加载用户数据失败: ${error.message}`);
        return [];
      }
    };
    

    const formatTimestamp = (timestamp) => {
      const date = new Date(timestamp * 1000);
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      });
    };
    

    const renderUserList = (users) => {
      const userListElement = document.getElementById('user-list');
      userListElement.innerHTML = '';
      
      users.forEach(user => {
        const card = document.createElement('div');
        // 移除水平滚动相关的snap-start类，适配网格布局
        card.className = 'card-shadow card-hover bg-white rounded-xl overflow-hidden';
        

        const avatarId = user.model_src || user.uin || Math.floor(Math.random() * 1000);
        
card.innerHTML = `
  <div class="relative h-56 bg-primary/10">
    ${user.model_src ? `
      <img 
        src="${user.model_src}" 
        alt="${user.username || '用户'}的头像" 
        class="w-full h-full object-contain"
      >
    ` : `
      <div class="w-full h-full flex items-center justify-center">
        <i class="fa fa-user-circle-o text-6xl text-primary/30"></i>
      </div>
    `}
    <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-4">
      <h3 class="text-white text-xl font-bold truncate">${user.username || '未知用户'}</h3>
    </div>
  </div>
  <div class="p-5">
    <div class="flex items-center text-gray-500 mb-3">
      <i class="fa fa-user-circle-o mr-2 text-primary"></i>
      <span class="text-sm">UID: ${user.uin || '未知'}</span>
    </div>
    <div class="mb-4">
      <p class="text-sm text-gray-600 font-medium mb-1">个性签名</p>
      <p class="text-gray-700 text-sm leading-relaxed line-clamp-2">
        ${user.signature ? user.signature.replace(/\r\n|\n/g, '<br>') : '暂无签名'}
      </p>
    </div>
    <div class="flex items-center text-sm text-gray-500">
      <i class="fa fa-clock-o mr-2 text-primary"></i>
      <span>更新于: ${user.timestamp ? formatTimestamp(user.timestamp) : '未知时间'}</span>
    </div>
  </div>
`;
        
        userListElement.appendChild(card);
      });
      
      // 更新统计信息
      document.getElementById('total-users').textContent = users.length;
      document.getElementById('active-users').textContent = Math.floor(users.length * 0.75);
      
      if (users.length > 0) {
        const latestUser = users.sort((a, b) => (b.timestamp || 0) - (a.timestamp || 0))[0];
        document.getElementById('latest-update').textContent = latestUser.timestamp ? formatTimestamp(latestUser.timestamp) : '未知';
      }
    };
    
    // 显示错误消息
    const showError = (message) => {
      const errorMessage = document.getElementById('error-message');
      const errorText = document.getElementById('error-text');
      
      errorText.textContent = message;
      errorMessage.classList.remove('hidden');
    };
    
    // 隐藏错误消息
    const hideError = () => {
      const errorMessage = document.getElementById('error-message');
      errorMessage.classList.add('hidden');
    };
    
    // 初始化页面
    const initPage = async () => {
      const loadingIndicator = document.getElementById('loading');
      
      try {
        // 显示加载状态
        loadingIndicator.style.opacity = '1';
        loadingIndicator.style.pointerEvents = 'auto';
        
        // 加载用户数据
        const users = await loadUserData();
        
        // 渲染用户列表
        if (users.length > 0) {
          renderUserList(users);
        } else {
          showError('用户数据为空或加载失败');
        }
        
        // 添加重试按钮事件监听
        document.getElementById('retry-button').addEventListener('click', async () => {
          hideError();
          await initPage();
        });
        
      } catch (error) {
        console.error('初始化页面失败:', error);
        showError(`初始化页面失败: ${error.message}`);
      } finally {
        // 隐藏加载状态
        loadingIndicator.style.opacity = '0';
        loadingIndicator.style.pointerEvents = 'none';
      }
    };
    
    // 页面加载完成后初始化
    document.addEventListener('DOMContentLoaded', initPage);